<template>
	<view class="recharge">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">申请提现</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view class="withdrawal-content">
			<view class="title">提现金额(元)</view>
			<view class="content-input">
				<view class="">￥</view>
				<view class="">
					<input type="number" v-model="enterAmount" class="input-style" @input="enterAmountChange"
						:placeholder="'单笔最大'+oneMaxAmount+'元，最多可转出'+totalAmount+'元'" placeholder-class="place-style" />
				</view>
				<view class="all-withdrawal" @tap="allWithdrawal">全部提现</view>
			</view>
			<!-- <view class="content-input">
				<view class="title">支付宝账号:</view>
				<view class="">
					<input v-model="enterZhifubao" class="input-font-style"
						:placeholder="'用于提现收款'" placeholder-class="place-style" />
				</view>
				<view class="all-withdrawal" @tap="allWithdrawal">全部提现</view> 
			</view> -->
			<view style="padding-top: 50upx;">提现手续费 {{config.cashOutRate}} %</view>
			<view class="cont" style="padding-top: 20upx;">提现费用 <text class="num">￥{{withdrawalExpenses}}</text> </view>
			<view class="cont" style="padding-top: 20upx;">到账金额 <text class="num">￥{{enterExpenses}}</text> </view>
			<view class="cont" style="padding-top: 20upx;">通道费用 <text class="num">1%</text> </view>
			<view class="bank-card-info">
				<view class="bank">到账银行卡</view>
				<view class="bankBox">
					<view v-if="bankList.length>0">
						<view class="card-info">{{bankList[0].cardBank}} ({{bankList[0].cardNum}})</view>
						<!-- <view class="time">预计{{config.rechargeTime}}分钟到账</view> -->
					</view>
					<!-- <u-icon class="iconf" name="arrow-right" color="#333" size="30upx"></u-icon> -->
				</view>
			</view>
			<view class="bank-card-info2" v-if="zhifubaoList.length>0">
				<view class="bank">到账支付宝</view>
				<view class="bankBox">
					<view v-if="zhifubaoList.length>0">
						<view class="card-info">({{zhifubaoList[0].aliPayAccount}})</view>
						<!-- <view class="time">预计{{config.rechargeTime}}分钟到账</view> -->
					</view>
					<!-- <u-icon class="iconf" name="arrow-right" color="#333" size="30upx"></u-icon> -->
				</view>
			</view>
			
			<view class="submit-bottom">
				<view class="submit-btn" @tap="submitFn" >立即提现</view>
				<!-- <view class="submit-btn"  @tap="forbid" >立即提现</view> -->
			</view>
		</view>

		<u-popup :show="isShow" mode="bottom" @close="closeFn" @open="openFn" :closeable="true">
			<view class="boxPopup">
				<view class="title">选择到账银行卡</view>
				<view v-for="(item,index) in lists" :key="index" class="lists-item" @tap="bankIndex = index">
					<view class="">
						<view class="card-info">{{item.name}}</view>
						<view class="">24小时到账</view>
					</view>
					<u-icon v-if="bankIndex == index" class="iconf" name="checkbox-mark" color="#2c1769" size="50upx">
					</u-icon>
				</view>
				<view class="submit-bottom">
					<view class="submit-btn" @tap="submitBank">确认</view>
				</view>
			</view>
		</u-popup>

		<view v-if="withdrawalFlag" class="withdrawalModal">
			<view class="withdrawalBox">
				<view class="title">请输入转让密码
					<u-icon name="close" class="closeIcon" @tap="closeWithdrawal" color="#999" size="30upx"></u-icon>
				</view>
				<view class="password">
					<view class="flex">
						<view class="password_num" v-for="(item,index) in miney_list">
							<view class="inputCont" v-if="item.id == index">
								<view v-for="(res,i) in withdrawal.payPsw.length" v-show="i == index">
									<view class="miney_data"></view>
								</view>
							</view>
						</view>
					</view>
					<input v-model="withdrawal.payPsw" maxlength="6" type="number" value="123" @input="input_num">
				</view>
			</view>
		</view>
		<view class="boxPopup1">
			<u-popup :show="openAccountShow" mode="center" @close="closePay">
				<view class="openAccountBox">
					<view class="title">未绑定银行卡</view>
					<view class="bottom_btn">
						<view class="btn_item line" @tap="closePay">取消</view>
						<view class="btn_item" @tap="goAccount">去绑定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="boxPopup1">
			<u-popup :show="openAccountShow2" mode="center" @close="closePay2">
				<view class="openAccountBox">
					<view class="title">您尚未绑定支付宝账号!<br>请先去绑定支付宝账号。</view>
					<view class="bottom_btn">
						<view class="btn_item line" @tap="closePay2">取消</view>
						<view class="btn_item" @tap="goAccount">去绑定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="boxPopup1">
			<u-popup :show="openAccountShow3" mode="center" @close="closePay3">
				<view class="openAccountBox">
					<view class="title">支付宝账号不能为空!</view>
					<view class="bottom_btn">
						<view class="btn_item" @tap="closePay3">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
		<u-keyboard ref="uKeyboard" @confirm="confirmWithdrawal" @change="keyChange" @backspace="backspace"
			:showCancel="false" confirmText="提现" mode="number" :dotDisabled="true" :show="keyboardShow"></u-keyboard>
	</view>
</template>

<script>
	import {
		appfundaccountWithdrawal,
		appfundaccountGetRwConfig,
		appfundaccountGetDetail,
		appcustomerbankcardList,
		appuserzhifubaoList
	} from "@/api/user.js";
	import bigNumber from 'bignumber.js';
	export default {
		data() {
			return {
				withdrawal: {
					payPsw: "",
					setFocus: false
				},
				keyboardShow: false,
				miney_list: [{
						id: 0,
						name: ''
					},
					{
						id: 1,
						name: ''
					},
					{
						id: 2,
						name: ''
					},
					{
						id: 3,
						name: ''
					},
					{
						id: 4,
						name: ''
					},
					{
						id: 5,
						name: ''
					},
				],
				withdrawalFlag: false,
				totalAmount: 0,
				enterAmount: '',
				enterZhifubao: '',
				withdrawalExpenses: 0,
				enterExpenses: 0,
				isShow: false,
				bankIndex: 0,
				oneMaxAmount:20000,
				lists: [{
						name: '招商银行 (2258)',
						num: 222
					},
					{
						name: '招商银行 (2258)',
						num: 222
					},
					{
						name: '招商银行 (2258)',
						num: 222
					},
				],
				selectIndex: 0,
				config: {},
				userAccount:{},
				bankList:[],
				zhifubaoList:[],
				openAccountShow:false,
				openAccountShow2:false,
				openAccountShow3:false,
				errorTips:0
			}
		},
		onShow() {
			appfundaccountGetDetail().then(res => {
				if(res.data.success){
					this.totalAmount = res.data.obj.hotMoney;
				}
				console.log(res,'000')
			});
			this.openAccountShow2 = false;
		},
		mounted() {
			appfundaccountGetRwConfig().then(res => {
				if (res.data.success) {
					this.config = JSON.parse(res.data.obj);
				}
			})
			this.getBankData();
		},
		watch: {
			enterAmount(newVal, orderVale) {
				if(new bigNumber(newVal).comparedTo(this.oneMaxAmount) === 1) {
						newVal = this.oneMaxAmount
						this.$nextTick(()=>{
							this.enterAmount = this.oneMaxAmount
						})
						
					}
				this.withdrawalExpenses = newVal > 0 ? Number(this.enterAmount * this.config.cashOutRate / 100).toFixed(
					2) : "0.00";
				this.enterExpenses = newVal > 0 ? Number(this.enterAmount - this.withdrawalExpenses).toFixed(2) : "0.00";
			},
		},
		methods: {
			// submitFirst(){
			// 	//验证支付宝账号
			// 	// let reg = /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
			// 	// if(!reg.test(this.enterZhifubao)){
			// 	// 	this.$u.toast('请输入正确的支付宝账号!');
			// 	// }else{
			// 	// 	if(this.enterZhifubao){
			// 	// 		this.openAccountShow2=true;
			// 	// 	}else{
			// 	// 		this.$u.toast('请输入正确的支付宝账号!');
			// 	// 	}
			// 	// }
			// },
			forbid(){
				this.$u.toast('由于通道维护，提现、充值暂停使用，请明天再试！');
			},
			confirmWithdrawal() { //确认提现
				if (this.enterAmount<=0){
					this.$u.toast('请输入正确的金额');
				}
				if(this.bankList.length == 0){
					this.$u.toast('暂未绑卡');
					
				}
				if(this.withdrawal.payPsw.length != 6){
					this.$u.toast('请输入正确的支付密码')
				}
				// if(this.enterZhifubao==""){
				// 	this.$u.toast('请输入正确的支付宝账号')
				// }
				console.log(this.withdrawal);
				let obj = {
					amount:this.enterAmount,
					bankId:this.bankList[0].id,
					accountPassword:this.hrymd5.md5(this.withdrawal.payPsw),
					// aliPayAccount: this.enterZhifubao
				}
				this.$u.toast("提现失败");
				this.closeWithdrawal();
				return
				appfundaccountWithdrawal(obj).then(res =>{
					console.log(res);
					if(res.data.success){
						this.closeWithdrawal();
						this.$u.toast(res.data.msg);
						setTimeout(() =>{
							this.back();
						},1500)
					}else{
						this.closeWithdrawal();
						this.$u.toast(res.data.msg);
					}
				})
				// this.keyboardShow = false;
				// this.withdrawalFlag = false;
			},
			closePay(){
				this.openAccountShow = false
			},
			closePay2(){
				this.openAccountShow2 = false
			},
			closePay3(){
				this.openAccountShow3 = false
			},
			goAccount(){
				uni.navigateTo({
					url:'/pages/setting/userBank'
				})
			},
			getBankData() {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				appcustomerbankcardList({
					page: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.rows.length>0) {
						
						this.bankList = res.data.rows.map(im => {
							let len = im.cardNumber.length;
							im.cardNum = im.cardNumber.substring((len - 4),len)
							// im["iconName"] = (im.bankName.substring(0, 1));
							// im["cardNumber"] = ("**** **** **** **** " + im.cardNumber.substring((len - 4),len));
							return im;
						});
						console.log(this.bankList,'000');
						// if(res.data.rows.length<1){
							
						// }
					}else{
						this.openAccountShow = true;
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					this.$refs.min_loading.close();
				});
				appuserzhifubaoList({
					page: 1,
					pageSize: 10
				}).then(res=>{
					if (res.data.rows) {
						this.zhifubaoList = res.data.rows;
						console.log(this.zhifubaoList)
					}
					if(this.zhifubaoList.length==0){
						this.openAccountShow2 = true;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			keyChange(val) { // 按键被点击
				if (this.withdrawal.payPsw.length <= 5) {
					this.withdrawal.payPsw += val;
				}
			},
			backspace() { // 退格键被点击
				// 删除value的最后一个字符
				if (this.withdrawal.payPsw.length) this.withdrawal.payPsw = this.withdrawal.payPsw.substr(0, this
					.withdrawal.payPsw.length - 1);
			},
			closeWithdrawal() { //键盘及密码输入框
				this.withdrawal = {
					payPsw: "",
					setFocus: false
				};
				this.keyboardShow = false;
				this.withdrawalFlag = false;
			},
			input_num() { //监听密码变化
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.withdrawal.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},

			submitBank() { //确认银行卡
				this.isShow = false;
			},
			allWithdrawal() { //全部提现
				this.enterAmount = this.totalAmount
			},
			enterAmountChange(e) { //输入变化
				
				let value = e.target.value;
				value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (value.indexOf(".") < 0 && value != "") {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
					value = parseFloat(value);
				}
				this.$nextTick(function() {
					this.enterAmount = value
				})
			},
			submitFn() { //提现
			// this.openAccountShow2=false;
				if (this.enterAmount > 0) {
					if(this.enterAmount>this.totalAmount){
						this.$u.toast('输入金额超过零钱余额');
						return
					}else{
						if(this.bankList.length>0){
							this.withdrawal = {
								payPsw: "",
								setFocus: true
							};
							this.keyboardShow = true;
							this.withdrawalFlag = true;
						}else{
							this.openAccountShow = true
						}
					}
				} else {
					this.$u.toast('请输入提现金额')
				}
			},
			openFn() {
				this.isShow = true;
			},
			closeFn() {
				this.isShow = false;
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		min-height: 100vh;
		overflow: hidden;
		background-color: #fff;
		padding-top: 120upx;

		.withdrawalModal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10071;
			background-color: rgba($color: #000000, $alpha: 0.2);

			.withdrawalBox {
				width: 600upx;
				padding: 70upx 40upx;
				color: #333;
				background-color: #fff;
				border-radius: 10upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				margin-top: -400upx;

				.password {
					width: 100%;
					height: 80upx;
					position: relative;

					input {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.flex {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.password_num {
							width: 80upx;
							height: 80upx;
							line-height: 80upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #999;

							.inputCont {
								display: flex;
								align-items: center;

								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}

						}
					}
				}

				.password::after {
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.title {
					color: #333;
					font-size: 30upx;
					line-height: 30upx;
					font-weight: 800;
					text-align: center;
					padding-bottom: 145upx;
					position: relative;

					.closeIcon {
						position: absolute;
						top: -40upx;
						right: 0;
					}
				}
			}
		}

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.bank-card-info {
			display: flex;
			justify-content: space-between;
			font-size: 30upx;
			font-weight: 400;
			color: #333;
			padding: 100upx 0upx 0upx;

			.bankBox {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding-right: 18upx;

				.time {
					color: #999;
					font-weight: 500;
					font-size: 24upx;
					text-align: right;
				}

				.iconf {
					margin-left: 80upx;
				}

				.card-info {
					color: #333;
					line-height: 30upx;
					padding-bottom: 20upx;
					font-size: 28upx;
					font-weight: bold;
					text-align: right;
				}
			}

		}
		
		.bank-card-info2 {
			display: flex;
			justify-content: space-between;
			font-size: 30upx;
			font-weight: 400;
			color: #333;
			padding: 0upx 0upx 0upx;
		
			.bankBox {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding-right: 18upx;
		
				.time {
					color: #999;
					font-weight: 500;
					font-size: 24upx;
					text-align: right;
				}
		
				.iconf {
					margin-left: 80upx;
				}
		
				.card-info {
					color: #333;
					line-height: 30upx;
					padding-bottom: 20upx;
					font-size: 28upx;
					font-weight: bold;
					text-align: right;
				}
			}
		
		}

		.withdrawal-content {
			padding: 40upx 30upx 0;
			position: relative;
			font-size: 24upx;
			font-weight: 400;
			color: #333;

			.title {
				font-size: 32upx;
				font-weight: 800;
			}

			.content-input {
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				display: flex;
				align-items: center;
				font-size: 60upx;
				padding: 60upx 0 0upx;

				.input-style {
					width: 100%;
					font-size: 72upx;
					padding-left: 40upx;
					
					.input-font-style{
						
						font-size: 40upx;
					
					}
				}
				.place-style {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.all-withdrawal {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #C09B3A;
					white-space: nowrap;
				}
				.input-font{
					font-size: 30upx;
					font-weight: 800;
				}
			}

			// .all-withdrawal {
			// 	color: #EF3D26;
			// }

			.cont {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				.num {
					color: #C09B3A;
					margin-left: 8upx;
				}
			}

			.submit-bottom {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 16upx 50upx 30upx;
				margin-top: 220upx;

				.submit-btn {
					width: 100%;
					height: 96upx;
					background: #CEA539;
					border-radius: 10upx;
					font-size: 32upx;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.boxPopup {
			width: 100%;
			padding: 30upx 40upx;
			background-color: #fff;
			color: #333;

			.title {
				color: #2c1769;
				font-size: 36upx;
				font-weight: 800;
				text-align: center;
				padding-bottom: 30upx;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
			}

			.lists-item {
				width: 100%;
				font-size: 24upx;
				font-weight: 400;
				color: #999;
				padding: 20upx 0upx 20upx;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				position: relative;

				.iconf {
					position: absolute;
					top: 28upx;
					right: 0;
				}

				.card-info {
					font-size: 30upx;
					color: #333;
				}
			}

			.submit-bottom {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 40upx 100upx 0;

				.submit-btn {
					width: 100%;
					padding: 0 100upx;
					height: 60upx;
					line-height: 60upx;
					background: #2c1769;
					font-size: 24upx;
					border-radius: 10upx;
					font-weight: 400;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.boxPopup1{
			/deep/.u-popup__content {
				width: 633upx;
				height: auto;
				background: #fff;
				border-radius: 20upx;
				overflow: hidden;
			
				.header {
					height: 48upx;
					// background: url('../../static/user/border.png');
					// background-size: 100% 100%;
					text-align: center;
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin: 34upx 38upx 0 38upx;
				}
			
			}
		}
		

		
		/deep/.u-button--info {
			border-color: transparent;
		}
		
		.openAccountBox {
			background: #FFFFFF;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-top: 50upx;
		
			.title {
				padding-bottom: 50upx;
			}
		
			.bottom_btn {
				width: 100%;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C09B3A;
				display: flex;
				align-items: center;
				justify-content: center;
		
				box-shadow: 0px 0px 1px 0px #BCBCBC;
		
				.btn_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 88upx;
				}
		
				.line {
					box-shadow: 1upx 0px 0px 0px #BCBCBC;
				}
			}
		}

	}
</style>
